<template>
  <div class="detail">
    <navbar>
      <div slot="navbar-left" @click="back">Back</div>
      <div slot="navbar-center">{{item.title}}</div>
    </navbar>
    <div class="main">
      <img class="img" style="margin-top: 5.5rem" :src="item.img" alt="">
      <div class="title bold">{{item.title}}</div>
      <div class="price bold">{{item.price}}</div>
      <div class="des">{{item.des}}</div>
    </div>
    <div class="flex allOprate fixedBottom flex-between">
      <div class="count flex">
        <div class="sub marginAuto0 textAlignCenter bold"
        @click="sub">-</div>
        <input class="inputCount marginAuto0 textAlignCenter" type="text" v-model="count">
        <div class="add marginAuto0 textAlignCenter bold"
        @click="add">+</div>
      </div>
      <div class="oprate flex">
        <div class="oprateItem oprateAdd bold"
        @click="addCar">加入购物车</div>
        <div class="oprateItem oprateBuy bold"
        @click="buy">立即购买</div>
      </div>
    </div>
  </div>
</template>

<script>
import navbar from "../components/navbar/navbar";

import {list} from "../data/itemList";
export default {
name: "detail",
  components:{
    navbar
  },
  data(){
    return{
      item: this.initItem(),
      count:1
    }
  },
  methods:{
    back(){
      this.$router.go(-1);
    },
    initItem(){
      var id=this.$route.query.id;
      var item;
      // list.filter(function (a){ if(id===a.id) item=a;});
      list.filter((a)=>{ if(id===a.id) item=a;} );
      return item;
    },
    sub(){
      if(this.count===1) alert("数量不能小于1");
      else this.count--;
      console.log("当前数量为:["+this.count+"]");
      },
    add(){this.count++;console.log("当前数量为:["+this.count+"]");},
    buy(){
      console.log("购买成功:"+"["+this.item.id+this.item.title+"]")
    },
    addCar(){
      const obj={};
      const theItem=this.item;
      obj.id=theItem.id;
      obj.title=theItem.title;
      obj.img=theItem.img;
      obj.price=theItem.price;
      obj.des=theItem.des;
      obj.type=this.item.type; obj.typeEn=theItem.typeEn;
      obj.addtion=this.count;
      this.$store.commit('addItem',obj);
      console.log("成功加入购物车:["+theItem.id+theItem.title+"]"+"---in detail");
      this.count=1;
    }
  }
}
</script>

<style scoped>
.detail{
  margin-bottom: 4.5rem;
}
.main .img{
  width: 100%;
}
.main img{
  height: 20rem;
}
.title{
  font-size: 2rem;

}
.price{
  color: #FF4400;
  font-size: 2rem;
}
.price::before{
  content: "￥";
  font-size: 1.5rem;
}
.des{
  text-indent: 2rem;
}
.allOprate{
  background-color: #F4F4F4;
  padding: .5rem 0;
}

.oprateItem{
  background-color: #FF4400;
  padding: 1rem 1rem;
  color: #fff;
}
.oprateAdd{
  border-top-left-radius: 2rem;
  border-bottom-left-radius: 2rem;
  border-right: .05rem solid #fff;
}
.oprateBuy{
  border-top-right-radius: 2rem;
  border-bottom-right-radius: 2rem;
}
.sub{
  height: 2rem;
  width: 2rem;
  background-color: #FF4400;
  line-height: 2rem;
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
  color: #fff;
}
.add{
  height: 2rem;
  width: 2rem;
  background-color: #FF4400;
  line-height: 2rem;
  border-top-right-radius: 1rem;
  border-bottom-right-radius: 1rem;
  color: #fff;
}
.inputCount{
  width: 3rem;
  height: 2rem;
  font-size: 1.5rem;
  border: none;
}
</style>